<template>
	<view>
		<map style="width: 750rpx;" :style="{height: mapHeight + 'px'}"></map>
		<touch-slide style="background-color: #FFFFFF;" :top="mapHeight - 420" :bottom="mapHeight - 140"
			:titleHeight="20">
			<text slot="title" style="background-color: #2C405A;
								border-top-left-radius: 4px;
								border-top-right-radius: 4px;
								color: #FFFFFF;">我是顶部固定部分</text>
			<view>
				<view>333333333333333</view>
				<view>111111111111111</view>
				<view>111111111111111</view>
				<view>111111111111111</view>
				<view>111111111111111</view>
				<view>111111111111111</view>
				<view>111111111111111</view>
				<view>111111111111111</view>
				<view>111111111111111</view>
				<view>111111111111111</view>
				<view>111111111111111</view>
				<view>111111111111111</view>
				<view>111111111111111</view>
				<view>111111111111111</view>
				<view>111111111111111</view>
				<view>111111111111111</view>
				<view>111111111111111</view>
				<view>111111111111111</view>
				<view>111111111111111</view>
				<view>111111111111111</view>
				<view>111111111111111</view>
				<view>111111111111111</view>
				<view>111111111111111</view>
				<view>111111111111111</view>
				<view>111111111111111</view>
				<view>111111111111111</view>
				<view>111111111111111</view>
				<view>111111111111111</view>
				<view>111111111111111</view>
				<view>111111111111111</view>
				<view>111111111111111</view>
				<view>111111111111111</view>
				<view>999999999999999</view>
			</view>
		</touch-slide>
	</view>
</template>

<script>
	import touchSlide from '@/components/touch-slide/touch-slide.vue'
	
	export default {
		components: {
			touchSlide
		},
		data() {
			return {
				mapHeight: 650
			}
		},
		mounted() {
			const _this = this;
			uni.getSystemInfo({
				success: (res) => {
					_this.mapHeight = res.screenHeight - res.statusBarHeight
					// #ifdef APP-NVUE || MP-WEIXIN
					_this.mapHeight = _this.mapHeight - 45
					// #endif
				}
			})
		},
		methods: {

		}
	}
</script>
